<template>
  <div class="tab">
    <!-- 表格标题 -->
    <div v-if="title !== null" class="title">
      {{ title }}
    </div>
    <!-- 表格 -->
    <el-table
      :data="data"
      stripe
      style="width: 100%;"
      class="table"
      :max-height="maxHeight"
    >
      <el-table-column
        v-if="data"
        type="index"
        label="序号"
        width="100"
      />
      <el-table-column
        v-for="item in columns"
        :key="item"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        v-bind="item"
        show-overflow-tooltip
      >
        <!-- 自定义表头 -->
        <template v-if="item.slotHeader" #header="scope">
          <slot :name="item.keyHeader || item.prop" v-bind="scope" />
        </template>

        <!-- 如果当前遍历到的列需要进行复杂的列渲染，在 table-column 的默认插槽位置进行渲染 -->
        <template v-if="item.slot" #default="scope">
          <!-- <span>自定义列渲染</span> -->
          <slot :name="item.key || item.prop" v-bind="scope" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- 分页数据 -->
    <template v-if="pageDate !== null">
      <el-pagination
        v-model:page-size="pageSize"
        v-model:current-page="currentPage"
        class="pagination"
        background
        layout="->, total, sizes, prev, pager, next,jumper"
        :page-sizes="pageDate.pageSizes"
        :total="pageDate.total"
        @current-change="pageDate.handlePageChange(currentPage)"
        @size-change="pageDate.handleSizeChange(pageSize)"
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps } from 'vue'
// const item=reactive({})
const props = defineProps({
  title: {
    type: String,
    default: null
  },
  maxHeight: {
    type: Number,
    default: 750
  },
  // 表格数据
  data: {
    type: Array,
    default: null
  },
  //   表头数据
  columns: {
    type: Array,
    default: null
  },
  // 是否分页
  pagination: {
    type: Boolean,
    default: false
  },
  //   分页数据
  pageDate: {
    type: Object,
    default: null
  }
})
const pageSize = ref(props.pageDate?.pageSize)
const currentPage = ref(props.pageDate?.currentPage)

</script>

<style scoped >
/* .tab {
    width: 100%;
    padding: 15px 0;
    margin-top: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    border-radius: 10px;
    background: #FFF;
    max-height: calc(100vh - 274px);
    overflow: hidden;
    box-sizing: border-box;
}
.title {
  position: relative;
  width: 100%;
  line-height: 50px;
  padding-left: 36px;
  font-size: 20px;
  color: #333333;
  font-weight: bold;
  margin-top: -15px;
  &::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: var(--el-color-primary);
  }
}
.table {
  max-height: calc(100% - 80px);
}
.pagination {
  padding: 0 10px{
    top: 30px;
    bottom: 20px;
  }
  text-align: center;
  ::v-deep .el-pagination__rightwrapper {
    justify-content: center;
  }
}
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-table th.el-table__cell {
    background-color: rgba($color: var(--el-color-primary), $alpha: 0.5);
    background: rgba($color: #FD7255, $alpha: .05);
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: rgba($color: #FD7255, $alpha: .05);
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background: rgba($color: #FD7255, $alpha: .4);
}
::v-deep .el-table__header tr th .cell {
    color: var(--el-color-primary)!important;
}
::v-deep .el-table .el-dropdown {
  color: var(--el-color-primary)!important;
} */
</style>
